import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store'
// import store from '@/store/'

// 解决Vue-Router升级导致的Uncaught(in promise) navigation guard问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter)

/**
 * 前端路由配置的两种方式
 * 1. hash模式(默认)
 * 2. history模式
 * 相同点：都可以实现路由配置和跳转（功能一样）
 * 不同点：路由的路径不一样=》hash模式带个#号；history不带
 * 使用场景：
 * 一般使用hash模式，因为hash可以运行在所有浏览器（兼容性好）；
 * 但是history模式只能在支持history api的浏览器运行
 */

// 箭头函数实现组件懒加载
// 布局组件(一)
const Layout = () => import('@/views/layout.vue')
// 首页（第一个标签页）
const Index = () => import('@/views/home/index.vue')
// 问答
const Question = () => import('@/views/question/index.vue')
// 视频
const Video = () => import('@/views/video/index.vue')
// 个人中心
const Profile = () => import('@/views/profile/index.vue')
// 登录
const Login = () => import('@/views/login/index.vue')
// 编辑个人资料
const User = () => import('@/views/user/edit.vue')
// 小智
const Chat = () => import('@/views/user/chat.vue')
// 搜索
const Search = () => import('@/views/search/index.vue')
const Result = () => import('@/views/search/result.vue')
// 详情
const Article = () => import('@/views/article/index.vue')

const routes = [
  {
    path: '/',
    // 布局骨架
    component: Layout,
    redirect: '/', // 重定向, '/' 就默认跳转到 '/home'
    // 二级路由
    children: [
      {
        path: '/',
        name: 'index',
        // 首页
        component: Index,
        // 开启缓存
        meta: { isKeepAlive: true }
      },
      {
        path: '/question',
        name: 'question',
        // 问答
        component: Question
      },
      {
        path: '/video',
        name: 'video',
        // 视频
        component: Video
      },
      {
        path: '/user',
        name: 'user',
        // 个人中心
        component: Profile
      }
    ]
  },
  {
    path: '/login',
    name: 'login',
    // 登录
    component: Login
  },
  {
    path: '/user/profile',
    name: 'profile',
    // 编辑资料
    component: User
  },
  {
    path: '/user/chat',
    name: 'chat',
    // 小智同学
    component: Chat
  },
  {
    path: '/search',
    name: 'search',
    // 搜索
    component: Search
  },
  {
    path: '/search/result',
    name: 'result',
    // 搜索结果
    component: Result,
    // 开启缓存
    meta: { isKeepAlive: true }
  },
  {
    path: '/article/:id',
    name: 'article',
    // 文章详情
    component: Article,
    // 开启缓存
    meta: { isKeepAlive: true }
  }
]

// 将routes规则挂载在router实例上 ==> 可以全局使用
const router = new VueRouter({
  routes
})

/**
 * 添加前门保安
 * 需求：控制 '/user' 开头的页面需要有 token 才能访问，如果没有跳转到登录
 * to 去哪
 * form 从哪来
 * next（方法）放行
 */
// 此处若没有拦截直接可以进入user界面, 添加拦截可以判断有无token
router.beforeEach((to, from, next) => {
  // 解构: store页面里面,的state数据里面,的user变量
  const { user } = store.state
  // 是用户相关页面，或没有token
  if (to.path.startsWith('/user') && !user.token) {
    // next === router.push 一样也可以跳转页面
    // 需求：把用户当前访问的没登录页面path当做参数（to.path），带到登录页=>登录成功后，跳到上次访问的页面
    next(`/login?redirectUrl=${to.path}`)
  } else {
    next()
  }
})
export default router
